<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片总数--layui后台管理模板</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="${ctxPath!}/css/public.css" media="all"/>
	<link rel="stylesheet" type="text/css" href="${ctxPath!}/plugins/layui/css/layui.css" media="all"/>
	<script type="text/javascript" src="${ctxPath!}/plugins/layui/layui.js"></script>
</head>
<body class="childrenBody">
<form class="layui-form">
	<blockquote class="layui-elem-quote news_search">
		<div class="layui-inline">
			<input type="checkbox" name="selectAll" id="selectAll" lay-filter="selectAll" lay-skin="primary" title="全选">
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm layui-btn-danger batchDel">批量删除</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-sm uploadNewImg">上传新图片</a>
		</div>
	</blockquote>
	<ul class="layer-photos-demo" id="Images"></ul>
</form>
<script>
    layui.use(['flow','form','layer','upload'],function(){
        var flow = layui.flow,
            form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            upload = layui.upload,
            $ = layui.jquery;

        //流加载图片
        var imgNums = 15;  //单页显示图片数量
        flow.load({
            elem: '#Images', //流加载容器
            done: function(page, next){ //加载下一页
                $.get("${ctxPath!}/data/images.json",function(res){
                    //模拟插入
                    var imgList = [],data = res.data;
                    var maxPage = imgNums*page < data.length ? imgNums*page : data.length;
                    setTimeout(function(){
                        for(var i=imgNums*(page-1); i<maxPage; i++){
                            imgList.push('<li><img layer-src="../../'+ data[i].src +'" src="../../'+ data[i].thumb +'" alt="'+data[i].alt+'"><div class="operate"><div class="check"><input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="'+data[i].alt+'"></div><i class="layui-icon img_del">&#xe640;</i></div></li>');
                        }
                        next(imgList.join(''), page < (data.length/imgNums));
                        form.render();
                    }, 500);
                });
            }
        });

        //设置图片的高度
        $(window).resize(function(){
            $("#Images li img").height($("#Images li img").width());
        });

        //多图片上传
        upload.render({
            elem: '.uploadNewImg',
            url: '../../json/userface.json',
            multiple: true,
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#Images').prepend('<li><img layer-src="'+ result +'" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><div class="operate"><div class="check"><input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="'+file.name+'"></div><i class="layui-icon img_del">&#xe640;</i></div></li>')
                    //设置图片的高度
                    $("#Images li img").height($("#Images li img").width());
                    form.render("checkbox");
                });
            },
            done: function(res){
                //上传完毕
            }
        });

        //弹出层
        $("body").on("click","#Images img",function(){
            //图片管理弹窗
                $.getJSON('${ctxPath!}/data/images.json', function(json){
                    var res = json;
                    layer.photos({
                        photos: res,
                        anim: 5
                    });
                });

        });

        //删除单张图片
        $("body").on("click",".img_del",function(){
            var _this = $(this);
            layer.confirm('确定删除图片"'+_this.siblings().find("input").attr("title")+'"吗？',{icon:3, title:'提示信息'},function(index){
                _this.parents("li").hide(1000);
                setTimeout(function(){_this.parents("li").remove();},950);
                layer.close(index);
            });
        });

        //全选
        form.on('checkbox(selectAll)', function(data){
            var child = $("#Images li input[type='checkbox']");
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        //通过判断是否全部选中来确定全选按钮是否选中
        form.on("checkbox(choose)",function(data){
            var child = $(data.elem).parents('#Images').find('li input[type="checkbox"]');
            var childChecked = $(data.elem).parents('#Images').find('li input[type="checkbox"]:checked');
            if(childChecked.length == child.length){
                $(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = true;
            }else{
                $(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = false;
            }
            form.render('checkbox');
        });

        //批量删除
        $(".batchDel").click(function(){
            var $checkbox = $('#Images li input[type="checkbox"]');
            var $checked = $('#Images li input[type="checkbox"]:checked');
            if($checkbox.is(":checked")){
                layer.confirm('确定删除选中的图片？',{icon:3, title:'提示信息'},function(index){
                    var index = layer.msg('删除中，请稍候',{icon: 16,time:false,shade:0.8});
                    setTimeout(function(){
                        //删除数据
                        $checked.each(function(){
                            $(this).parents("li").hide(1000);
                            setTimeout(function(){$(this).parents("li").remove();},950);
                        })
                        $('#Images li input[type="checkbox"],#selectAll').prop("checked",false);
                        form.render();
                        layer.close(index);
                        layer.msg("删除成功");
                    },2000);
                })
            }else{
                layer.msg("请选择需要删除的图片");
            }
        })

    })
</script>
</body>
</html>